<template>
  <div class="login">
    <el-card>
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="账号" prop="zhanghao">
          <el-input
            v-model="formData.zhanghao"
            placeholder="请输入账号"
            clearable
            class="zhanghao"
            prefix-icon="el-icon-user"
            :style="{ width: '90%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
            clearable
            show-password
            prefix-icon="el-icon-lock"
            :style="{ width: '90%' }"
            oncopy="return false"
          ></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="text" @click="wangPass">忘记密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 点击忘记密码的输入新密码 -->
    <el-dialog
      title="请输入新密码"
      :visible.sync="zhangVisible"
      width="30%"
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
    <!-- 嵌套框 输入新密码 -->
      <el-dialog
        width="30%"
        title="输入新密码"
        :visible.sync="innerVisible"
        :close-on-click-modal="false"
        :show-close="false"
        append-to-body
      >
        <el-form
          :model="regForm"
          :rules="regRules"
          ref="regFormRef"
          label-width="100px"
        >
          <el-form-item label="密码" prop="newPass">
            <el-input v-model="regForm.newPass"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="closeInnerVisible">取消</el-button>
            <el-button type="primary" @click="upNewPass">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-input v-model="iszhangHao" placeholder="请输入账号"></el-input>
      <el-button type="text" @click="getYan">获取验证码</el-button>
      <el-input v-model="thisYan" placeholder="请输入验证码"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeZhangVisible">取 消</el-button>
        <el-button type="primary" @click="openZhangVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var checkPass = (rule, value, callback) => {
      const regPass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/;
      if (regPass.test(value)) {
        return callback();
      }
      callback(
        new Error(
          "必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-16 之间"
        )
      );
    };
    return {
      userId: "",
      thisYan: "",
      emailYan: "",
      iszhangHao: "",
      zhangVisible: false,
      innerVisible: false,
      formData: {
        zhanghao: "qwqw1234",
        password: "Qa1234567",
      },
      regForm: {
        newPass: "",
      },
      rules: {
        zhanghao: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 8,
            max: 16,
            message: "长度在 8 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 8,
            max: 16,
            message: "长度在 1 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
      regRules: {
        newPass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPass, trigger: "blur" },
        ]
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.elForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("writers/login", {
          zhanghao: this.formData.zhanghao,
          password: this.formData.password,
        });
        //console.log(res);
        if (res.status !== 200) return this.$message.error("登陆失败");
        this.$message.success("成功");
        console.log(res);
        window.sessionStorage.setItem("writerName", res.username);
        window.sessionStorage.setItem("writerAvatar", res.avatar);
        //window.localStorage.setItem("writerAvatar", res.avatar);
        window.sessionStorage.setItem("writerToken", res.writertoken);
        window.sessionStorage.setItem("writerId", res.id);
        window.sessionStorage.setItem("writerState", res.state);
        this.$store.state.writerData.writerName = res.username;
        this.$store.state.writerData.writerAvatar = res.avatar;
        this.$router.push("/writerhome");

        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs.elForm.resetFields();
    },
    async wangPass() {
      this.zhangVisible = true;
    },
    closeZhangVisible() {
      this.zhangVisible = false;
      this.iszhangHao = "";
      this.thisYan = "";
    },

    async openZhangVisible() {
      if (this.emailYan == this.thisYan) {
        this.innerVisible = true;
      } else {
        this.$message.error("验证码错误");
      }
    },
    async getYan() {
      const { data: res } = await this.$http.post("writers/getEmailByHao", {
        zhanghao: this.iszhangHao,
      });
      if (res.status != 200) {
        this.$message.error("该账号不存在");
      } else {
        this.emailYan = res.data.Num;
        this.userId = res.data.id;
      }
    },
    closeInnerVisible() {
      this.innerVisible = false;
      this.$refs.regFormRef.resetFields();
    },
    async upNewPass() {
      const {
        data: res,
      } = await this.$http.post(
        `writers/changPass/${this.userId}`,
        { password: this.regForm.newPass }
      );
      if(res.status === 200){
        this.innerVisible = false;
        this.zhangVisible = false;
        this.$refs.regFormRef.resetFields();
        this.userId = this.thisYan = this.emailYan = this.iszhangHao = '';
        this.$message.success('更改成功')
      }
      else{
        this.$message.error("更改失败")
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 500px;
  position: fixed;
  margin: 250px 35%;
}
</style>
